<template>
  <BasicDrawer
    v-bind="$attrs"
    @register="registerDrawer"
    showFooter
    :title="getTitle"
    :destroyOnClose="true"
    width="90%"
    @ok="handleSubmit"
    :show-ok-btn="false"
  >
    <Tabs v-model:activeKey="activeKey" centered class="h-full">
      <TabPane v-for="item in tabList" :key="item.key" :tab="item.title" class="h-full">
        <!-- forceRender -->
        <component
          :is="item.component"
          :activeKey="activeKey"
          :cur-key="item.key"
          :deptCode="deptCode"
        />
      </TabPane>
    </Tabs>
  </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref } from 'vue';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { Tabs, TabPane } from 'ant-design-vue';
  import ChartsStatistics from './modules/ChartsStatistics.vue';
  export default defineComponent({
    name: 'ChartsDrawer',
    components: {
      BasicDrawer,
      Tabs,
      TabPane,
      ChartsStatistics,
    },
    emits: ['success', 'register'],
    setup(_, { emit }) {
      const activeKey = ref('');
      const tabList = ref([
        {
          title: '月统计',
          key: '1',
          component: 'ChartsStatistics',
        },
        {
          title: '年统计',
          key: '2',
          component: 'ChartsStatistics',
        },
        {
          title: '人员月统计',
          key: '3',
          component: 'ChartsStatistics',
        },
        {
          title: '人员年统计',
          key: '4',
          component: 'ChartsStatistics',
        },
      ]);
      let dataRef = ref({});
      const deptCode = ref('');
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        setDrawerProps({ confirmLoading: false });
        activeKey.value = data?.type;
        deptCode.value = data?.deptCode;
      });

      const getTitle = '统计';

      async function handleSubmit() {
        try {
          console.log('dataRef111', unref(dataRef));
          closeDrawer();
          emit('success');
        } finally {
          setDrawerProps({ confirmLoading: false });
        }
      }

      return {
        registerDrawer,
        getTitle,
        handleSubmit,
        activeKey,
        tabList,
        deptCode,
      };
    },
  });
</script>
